<template>
  <view class="tabsWrap">
    <up-form-item prop="articleType">
      <CommonTabs
        :modelValue="modelIndex"
        :tabs="tabs"
        @update:modelValue="changeValue"
      />
    </up-form-item>
  </view>
</template>

<script setup>
import { computed, ref, toRef, watch } from 'vue';
import CommonTabs from '@/components/common/tabs.vue';

import { publishType as tabs } from '@/utils/enums/index.js';

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(['update:modelValue']);

const modelValue = toRef(props, 'modelValue');
// tabs组件用的是index做下标，但是数据用的是id，所以这里做一个转换
const modelIndex = computed(() => {
  return tabs.findIndex((item) => item.id === modelValue.value.articleType);
});

const changeValue = (value) => {
  emit('update:modelValue', {
    ...props.modelValue,
    articleType: tabs[value].id,
  });
};
</script>

<style lang="scss">
.tabsWrap {
  display: flex;
  justify-content: space-around;
  background: #fff;
}
</style>
